<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url('../images/1.jpg') no-repeat center top;
        }

        li {
            list-style: none;
        }

        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }

        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }

        .baidu img {
            width: 100px;
        }
    </style>
</head>
<body>
<ul class="baidu">
    <li><img alt="" src="../images/1.jpg"></li>
    <li><img alt="" src="../images/2.jpg"></li>
    <li><img alt="" src="../images/3.jpg"></li>
    <li><img alt="" src="../images/4.jpg"></li>
</ul>


<script>
    // 1.获取元素
    const imgArr = document.querySelector('.baidu').querySelectorAll('img');

    // 2.循环注册时间
    for (let imgArrElement of imgArr) {
        imgArrElement.onclick = function () {
            console.log(`我被点击了 ${imgArrElement.src}`)

            // 3.把这个路径 this.src 给body就可以了
            // bug点, 修改 背景图片的属性, 忘了加 url('')
            document.body.style.backgroundImage = `url('${this.src}')`;
        }
    }

</script>
</body>
</html>
